import React, { Component } from 'react';
import { NavBar, SideBar } from 'antd-mobile'
import "../../styles/Fenlei.scss"
import * as service from "../../api/index"


class Fenlei extends Component {
    constructor(props) {
        super(props);
        this.state = {
            chanping: [],//一级列表
            list2: []//右侧二级商品
        };
    }
    async componentDidMount() {
        //左侧分类列表
        const res = await service.categorylist()
        // console.log(res.data.data);
        this.setState({ chanping: res.data.data })

        //左侧分类列表
        const res1 = await service.categorybrandlist({ category: res.data.data[0] })
        // console.log(res1.data.data);
        this.setState({ list2: res1.data.data })


    }
    async listclick(key) {
        // 一级分类
        var res = await service.categorylist()
        // console.log(res.data.data);
        // 二级分类
        var res = await service.categorybrandlist({ category: res.data.data[key] })
        // console.log(res.data.data);
        this.setState({ list2: res.data.data })
    }


    render() {

        return (
            <div className='fenlei'>
                <div className="top">
                    <NavBar onBack={() => { this.props.history.go(-1) }} ><p>商品分类</p></NavBar>
                </div>
                <div className="chanping">
                    <SideBar defaultActiveKey="0" onChange={(key) => { this.listclick(key) }}>
                        {
                            this.state.chanping.map((item, index) => {
                                return (
                                    <SideBar.Item key={index} title={item} />
                                )
                            })
                        }
                    </SideBar>
                    <div className="you">
                        {
                            this.state.list2.map((item, index) => {
                                return (
                                    <span onClick={() => {
                                        // console.log(item.brand);
                                        this.props.history.push({ pathname: '/search_xiang', state: item.brand })
                                    }} key={index}>{item.brand}</span>
                                )
                            })
                        }
                    </div>

                </div>
            </div>
        );
    }
}

export default Fenlei;